<template>
	<view class="wrap">
		<template v-if="vuex_token">
			<!--收货地址区-->
			<view class="addressClass u-flex u-row-between u-col-top u-p-10" @tap='jumpTo()'>
				<view class="address">
					<text class="title u-p-l-10 u-font-20">{{defaultAddress}}</text>
					<view class="to">
						<u-icon name="arrow-right" :size="40" color="#999999"></u-icon>
					</view>

				</view>
				<view class="phone u-flex u-row-between">
					<text class="phone u-font-16">{{defaultName}}</text>
					<text class="phone u-font-16">{{defaultPhone}}</text>
				</view>
			</view>

			<!--订单区-->
			<view class="cartGoodsList u-p-b-80">
				<view class="cartGoods u-flex u-p-15" v-for="goods in carts" :key="goods.id">
					<view class="goodsInfo u-flex u-p-10">
						<view @tap='jump(`/pages/goods/goods-detail/goods-detail`,goods.goods_id)'>
							<u-image border-radius="15" width="200rpx" height="200rpx" :src="goods.goods.cover_url">
							</u-image>
						</view>
						<view class="goodsBaseInfo u-flex u-row-between u-col-top u-p-10">
							<view class="priceNum" @tap='jump(`/pages/goods/goods-detail/goods-detail`,goods.goods_id)'>
								<text class="title u-p-l-10 u-font-32">{{goods.goods.title}}</text>
								<br>
							</view>
							<view class="priceNum u-flex u-row-between">
								<text class="price u-font-34">￥{{goods.goods.price}}</text>
								<view class="u-text-right small">
									<text>✖{{goods.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottomFixed u-flex u-p-15">
				<view class="u-flex-5">
				</view>
				<view class="u-flex u-flex-7 u-row-around">
					<view>
						<text class="title">合计:</text>
						<text class="price">￥{{totalPrice}}</text>
					</view>
					<u-button type="success" :ripple="true" ripple-bg-color="#909399" shape="square"
						@click="gotoOrderPreview">提交订单并支付</u-button>
				</view>
			</view>
		</template>
		<template v-else>
			<u-empty text="暂未登入" mode="permission"></u-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: [],
				carts: [],
				totalPrice: 0,
				defaultAddress: '',
				defaultPhone: '',
				defaultName: '',
				chooseAddress:{},
				chooseAddressId:0
			}
		},
		async onLoad(option) {
			const res = await this.$u.api.ordersPreview()
			this.address = res.address
			this.carts = res.carts
			if(option.addressId){
				console.log('addressId',option.addressId)
				var obj=this.address.find((obj) => {
					/* console.log('obj',obj)
					console.log('obj.id',obj.id)
					console.log('obj.id === option.addressId',obj.id == option.addressId) */
					if(obj.id == option.addressId){
						this.chooseAddressId = option.addressId
						return obj
					}
				})
				this.chooseAddress=obj
				console.log('chooseAddress',this.chooseAddress)
			}
			this.initOrderData()
		},
		methods: {
			// 商品详情跳转
			jump(url, id) {
				console.log('jump', url)
				this.$u.route({
					url,
					params: {
						id
					}
				})
			},
			jumpTo() {
				console.log('jumpTo')
				uni.navigateTo({
					url: '/pages/cart/address_list/address_list'
				})
			},
			//初始化总价和默认收货地址
			async initOrderData() {
				this.carts.forEach((cart) => {
					let price = cart.num * cart.goods.price
					console.log('price', price)
					this.totalPrice += price
				})
				console.log('totalPrice', this.totalPrice)
                //选取收货地址填充
				if(this.chooseAddressId > 0){
					
				}else{
					for (var i = 0, len = this.address.length; i < len; i++) {
						let add = this.address[i]
						//默认收货地址
						if (add.is_default == 1) {
							this.chooseAddress=add;
							break;
						}
					}
					//没有默认收货地址 取第一个收货地址
					if (!this.defaultAddress || !this.defaultPhone) {
						this.chooseAddress = this.address[0]
					}
				}
				let defaultAddress = this.chooseAddress.province + this.chooseAddress.city + this.chooseAddress.county + " " + this.chooseAddress.address
				this.defaultAddress = defaultAddress
				this.defaultPhone = this.chooseAddress.phone
				this.defaultName = this.chooseAddress.name
				console.log('defaultAddress', this.defaultAddress)
				console.log('defaultPhone', this.defaultPhone)
				console.log('defaultName', this.defaultName)
			},
			async gotoOrderPreview() {
				//todo  支付逻辑
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				//提交订单
				console.log('chooseAddress',this.chooseAddress)
				const params={}
				params.address_id=this.chooseAddress.id
				const res = await this.$u.api.ordersSubmit(params);
				console.log('gotoOrderPreview',res)
				let  orderId=res.id
				console.log('订单号:',orderId)
				//获取订单号之后 再获取二维码
				const erweimaRes=await this.$u.api.payErweiMa(orderId)
				console.log('获取我二维码是：',erweimaRes)
				//获取二维码之后进行支付
				/* const payRes=await this.$u.api.payErweiMa(orderId)
				console.log('获取我二维码是：',erweimaRes) */
				
				uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
				
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/order/order'
					})
				}, 1500)
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		min-height: 80vh;

		.empty {
			height: 80vh;
		}

		.loading {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.title,
		.price {
			font-weight: 800;
		}

		.price {
			color: #e83333;
		}

		.cartGoodsList {
			.cartGoods {
				.goodsInfo {
					width: 100%;
					background-color: rgb(251, 250, 251);

					.goodsBaseInfo {
						width: 100%;
						height: 200rpx;
						flex-direction: column;

						.priceNum {
							width: 100%;

						}
					}
				}
			}
		}

		.addressClass {
			width: 100%;
			height: 100rpx;
			flex-direction: column;
			background-color: rgb(251, 250, 251);

			.address {
				width: 50%;
				padding-left: 8rpx;
				padding-right: 5rpx;

				.to {
					position: fixed;
					right: 0;
				}
			}

			.phone {
				width: 50%;
				padding-left: 8rpx;
			}
		}

		.bottomFixed {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
		}

		/*#ifdef H5*/
		.bottomFixed {
			bottom: 100rpx;
		}

		/*#endif*/
		/*#ifdef MP-WEIXIN*/
		.bottomFixed {
			bottom: 0;
			z-index: 99999;
		}

		/*#endif*/

	}
</style>
